tbody.addEventListener('click',function(e){
    const target = e.target
    //获取事件源
    const classes = Array.from(target.classList)
    //classList是一个类数组
    const tr = target.parentNode.parentNode
    if(classes.includes('btn-edit')){
        tr.classList.add('edit')
        const spans = tr.querySelectorAll('span')
        spans.forEach(span => {
            span.nextElementSibling.value = span.innerHTML 
        })
    }else if(classes.includes('btn-ok')){
        //确定按钮
        //把修改之后的数据发送给后端 ， 成功以后再修改前端
        const id = tr.getAttribute('data-id')
        const name = tr.querySelector('.inputName').value
        const price = tr.querySelector('.inputPrice').value
        const num = tr.querySelector('.inputNum').value
        
        utils.fetch('./api/shop/update.php', {
            id,name,price,num
        }).then(resp=>{
            if(resp.code === 200){
                tr.classList.remove('edit')
                const spans = tr.querySelectorAll('span')
                spans.forEach(span => {
                    span.innerHTML = span.nextElementSibling.value  
                })
            }
        })
    }else if( classes.includes('btn-cancel')){
        tr.classList.remove('edit')
    }
    else if(classes.includes('btn-del')){
        const id = tr.getAttribute('data-id')
        utils.fetch('./api/shop/delete.php' ,{
            id
        }).then(resp=>{
           getData()
        })
    }
})